VueRouter在Chrome扩展中的应用

您所在的位置：网站首页 › vue routerpush › VueRouter在Chrome扩展中的应用

VueRouter在Chrome扩展中的应用

#VueRouter在Chrome扩展中的应用| 来源: 网络整理| 查看: 265

我一直在用Vue 3+ VueRouter做一个铬的扩展。

使用router.push功能，我试图将路由器视图内容更改为不同的组件，这意味着向用户显示不同的UI。

但是，不管我用什么方法，我都不能改变观点。

所以我的App.vue有路由器视图，我有两个组件，我想一次展示一个。

组件一是关于，第二部分是家。

我所做的就是创建了一个在onClick事件上触发的方法。

所以，第一个视图是Home (用户首先看到这个视图)。然后，当用户单击一个按钮时，它将交换UI组件，显示有关Page的内容。我使用router.push('/about')将UI组件交换为About.vue。但没有成功。

我知道这个事实，铬扩展并不是一个真正的网页，所以路由是不同的，但似乎没有任何工作。

我查过这份推荐信，也试过了，可惜没有用

How to display router view with VUEJS3 in a build project for google chrome extension

router.js

import { createRouter, createWebHashHistory } from "vue-router"; const routes = [ { path: "/index.html", component: () => import("../src/App.vue"), name: "App", }, { path: "/about", component: () => import("../src/views/About.vue"), name: "About", }, ]; const router = createRouter({ history: createWebHashHistory("index.html"), routes, }); export default router;

main.js

import { createApp } from "vue"; import App from "./App.vue"; import "./index.css"; import store from "./store/index"; import router from "./router"; const app = createApp(App); app.use(store); app.use(router); app.mount("#app");

App.vue (当我使用路由器视图时)

如果我在Chrome扩展上做这样的路由器查看，什么都不会显示。

所以我这样做也是为了通过使用路由器链接来改变视图。也没那么好用。通过点击路由器链接标签，什么都没起作用。

About methods: { routerPush() { this.$router.push("about"); this.$router.push("/about"); tried both / and without / }, } About

执行上述代码只是为了测试router.push功能。但没有成功

【本文地址】

VueRouter在Chrome扩展中的应用

VueRouter在Chrome扩展中的应用

今日新闻

推荐新闻